import React, { PropsWithChildren } from "react";

interface MaycardProps {
  header?: React.ReactNode;
  image?: string;
  className?: string; // ✅ 添加 className 支持
}

const Maycard: React.FC<PropsWithChildren<MaycardProps>> = ({
  header,
  image,
  children,
  className,
}) => {
  return (
    <div
     className={`p-5 rounded-[20px] bg-white h-full flex flex-col ${className || ""}`}
    >
      {header && (
        <div className="maycard-header flex items-center text-[20px] font-bold mb-2.5">
          {image ? (
            <img src={image} alt="header" className="w-5 h-[auto]" />
          ) : (
            <div className="w-1.5 h-5 bg-[#236BFF]" />
          )}
          <span className="ml-4">{header}</span>
        </div>
      )}
      <div className="h-full flex-1 flex flex-col">{children}</div>
    </div>
  );
};

export default Maycard;
